<template>
  <div id="car">
         <x-header title="购物车" style="position:fixed;top:0px;z-index:1000;width:100%" :left-options="{showBack: false}" @on-click-more="show = false">
            <a slot="right">
             <!-- <span style="color:red" v-show="!bianji" @click="bianjiClick">编辑</span>
             <span style="color:red" v-show="bianji" @click="bianjiClick">完成</span> -->
             <!-- <img width="20" src="static/cart/Trash@2x.png" alt=""> -->
            </a>
          </x-header> 
      <div class="" v-if="iskong" style="margin-top:46px">
         <div class="shop_items">
            <div class="shops_" v-for="(item,index) in cartListData" :key="index" :value="item">
                <div class="shop_name">
                  <!-- <check-icon :value.sync="demo1" type="plain" class="check" @click.native="clicking()"></check-icon> -->
                  {{item.goods.shopname}}
                  </div>
                <div class="shop_list" >
                  <div class="shop_check" @click="mycheckFn(item)">

                    <check-icon   :value.sync="item.ischeck" type="plain"></check-icon>
                  </div>
                  <div class="shop_img"><img :src="urlList(item.goods.product_thumb_image)" alt=""></div>
                  <div class="shop_info">
                    <!-- <div><span>正古</span>有机月饼礼盒</div> -->
                    <div>{{item.goods.goodsname}}</div>                    
                    <div class="shop_day">{{item.params1}}</div>
                    <div style="margin-top:-15px">
                      <group>
                        <x-number @on-change="changeNum(item)" v-model="item.number" button-style="round" :min="1"></x-number>
                      </group>
                    </div>
                  </div>
                  <div class="shop_right">
                    <div>￥{{item.goods.shop_price}}</div>
                    <div class="dele" @click="deleCartTip(item.cartsid)"><img src="static/cart/Trash@2x.png" alt=""></div>
                  </div>

                  <!-- 删除提示 -->
                     <div v-transfer-dom>
                      <confirm v-model="show1"
                      :title="delTile"
                      @on-cancel="onCancel"
                      @on-confirm="onConfirm(item.cartsid)"
                      @on-show="onShow"
                      @on-hide="onHide">
                        <p style="text-align:center;">{{deleMessage }}</p>
                      </confirm>
                    </div>
                </div>
                 <!--  -->
        <alert v-model="tankuang" :title="('提示')" @on-show="onShow" @on-hide="onHide"> 请至少选择一个商品</alert>
           </div>
         </div>
         <!-- 底部操作 -->
           <div class="car_del_totle">
              <!-- <img class="d-item" src="/static/cart/duin@2x.png" alt="">
              <img class="d-item" src="/static/cart/dui@2x.png" alt=""> -->
              
              <!-- <div id="checks"> -->
               <label> <input type="checkbox" style="width: 1.6rem;height: 1.6rem;vertical-align:middle;margin-left:1rem;" name="" @click="checkAll" id="">
              <!-- </div> -->
              </label>
             <!-- <check-icon :value.sync="demo1" type="plain" class="check"></check-icon>
                  <span>全选</span> -->
                  
              <div class="car_money">合计：￥{{totalPrice}}</div>
              <div class="car_del" v-show="false" @click="go_delete">
                  <span>删除</span>
              </div>
              <div class="car_totle" @click="go_confirms" v-show="true">
                  <span>结算</span>
              </div>
        </div>
        <!-- 为你推荐 -->
        <div class="myrecommend">
          <p class="set-p">为你~推荐</p>
          <shoplist-page :shoplistData="shoplistData" style="margin-top:10px"></shoplist-page>

        </div>
      </div>
      <div class="cart_wrap" v-else style="margin-top:46px">
        <x-button mini plain class="go_choose" @click.native="go_home">马上去挑选</x-button>
      </div>
      <!-- <toast v-model="show1">{{text}}</toast> -->

  </div>
</template>

<script>
import { homeUrl } from "../../components/utils/utils.js";
import shoplistPage from "../../components/toolComponent/shoplistPage";

import axios from "axios";
import qs from "qs";
import {
  Tabbar,
  TabbarItem,
  Group,
  Cell,
  XButton,
  XHeader,
  XNumber,
  Toast,
  Checker,
  CheckerItem,
  CheckIcon,
  Confirm,
  Alert,
  TransferDomDirective as TransferDom
} from "vux";

export default {
  directives: {
    TransferDom
  },
  components: {
    Tabbar,
    TabbarItem,
    Group,
    Cell,
    XButton,
    XHeader,
    XNumber,
    CheckIcon,
    Toast,
    CheckerItem,
    Checker,
    Confirm,
    Alert,
    shoplistPage
  },
  data() {
    return {
      roundValue: 1,
      demo1: false,
      cartListData: [],
      text: "",
      show1: false,
      checkData: [],
      checkDatas: [],
      demo1Checkbox: [2, 1],
      test: true,
      checked: false,
      tankuang: false,
      totalPrice: 0.0,
      deleMessage: "你确定要删除吗?",
      delTile: "温馨提示",
      iskong: true,
      bianji: false,
      checkedData: [],
      deletCartId: "",
      shoplistData: [],
      wxOpenId: localStorage.getItem("openid"),
      canshu: [] , 
      mycheck:false
    };
  },

  methods: {
    mycheckFn (item) {
      if (item.ischeck == true) {
        this.$data.totalPrice = this.$data.totalPrice + item.goods.shop_price * item.number
      } else {
        this.$data.totalPrice = this.$data.totalPrice - item.goods.shop_price * item.number
      }
    } ,
    bianjiClick() {
      if (this.bianji == true) {
        return (this.bianji = false);
      }
      if (this.bianji == false) {
        return (this.bianji = true);
      }
    },
    // 请求购物车列表[]
    cartList() {
      var that = this
      var datas = qs.stringify({
        wxid: "oCBm3vxlqwJjUbBDshKiQ50IFSjs"
      });
      axios
        .post(homeUrl() + "cartstableManageJsonSelect/", datas, {
          emulateJSON: true
        })
        .then(
          result => {
            if (result.status == 200 && result.data.length > 0) {
              this.iskong = true;
              
              that.$data.cartListData = result.data;
              for (var i = 0; i < that.$data.cartListData.length; i++) {
                that.$data.cartListData.ischeck = false
              }
            } else if (result.data.length == 0) {
              that.$data.iskong = false;
            }
          },
          error => {
            this.$vux.toast.text("网络请求失败....", "bottom");
          }
        );
    },
    // 图片处理
    urlList(imgObj) {
      if (imgObj != null) {
        var srcUrl = homeUrl() + imgObj;
        return srcUrl;
      }
    },
    // 购物车数量修改
    changeNum(item) {
      var that = this
      var datas = qs.stringify({
        number: item.number,
        cartsid: item.cartsid
      });
      axios
        .post(homeUrl() + "cartstableManageJsonUpdate/", datas, {
          emulateJSON: true
        })
        .then(
          result => {
            if (result.data.status == "ok") {
              that.$data.totalPrice = 0
              for (var i = 0; i < that.$data.cartListData.length; i++) {
                if (that.$data.cartListData[i].ischeck == true) {
                  that.$data.totalPrice = that.$data.totalPrice + that.$data.cartListData[i].goods.shop_price * that.$data.cartListData[i].number
                }
              }
            } else {
              this.$vux.toast.text("网络请求失败....", "bottom");
              setTimeout(function () {
                window.location.reload()
              } , 200) 
              
            }
          },
          error => {
            this.$vux.toast.text("网络请求失败....", "bottom");
            setTimeout(function () {
              window.location.reload()
            } , 200) 
          }
        );
    },
    deleCartTip(cartId) {
      this.show1 = true;
      this.deletCartId = cartId;
    },
    // 从购物车删除商品
    deleCart(cartId) {
      var datas = qs.stringify({
        ids: JSON.stringify(cartId),
        tablename: "carts"
      });
      axios
        .post(homeUrl() + "cartstableManageJsonDelete/", datas, {
          emulateJSON: false
        })
        .then(
          result => {
            this.cartList();
          },
          error => {
            this.$vux.toast.text("网络请求失败....", "bottom");
          }
        );
    },
    onCancel() {
      console.log("on cancel");
    },
    onConfirm() {
      var arr = this.deletCartId.split(",");
      this.deleCart(arr);
    },
    // 去挑选
    go_home() {
      this.$router.push({
        name: "home"
      });
    },
    onHide() {
      console.log("on hide");
    },
    onShow() {
      console.log("on show");
    },
    // 全选
    checkAll(event) {
      if (!event.currentTarget.checked) {
        this.$data.totalPrice = 0
        for (var i = 0; i < this.$data.cartListData.length; i++) {
          this.$data.cartListData[i].ischeck = false
        }
      } else {
        this.$data.totalPrice = 0
        for (var i = 0; i < this.$data.cartListData.length; i++) {
          this.$data.cartListData[i].ischeck = true
          this.$data.totalPrice = this.$data.totalPrice + this.$data.cartListData[i].goods.shop_price * this.$data.cartListData[i].number
        }
      }
    },
    // 去结算
    go_confirms() {
      var parmamsArr = [];
      for (var i = 0; i < this.$data.cartListData.length; i++) {
        if (this.$data.cartListData[i].ischeck == true) {
          var parmamsObj = {};

          parmamsObj.number = this.$data.cartListData[i].number;
          parmamsObj.params1 = this.$data.cartListData[i].params1;
          parmamsObj.params2 = this.$data.cartListData[i].params2;
          parmamsObj.shopname = this.$data.cartListData[i].goods.shopname;

          parmamsObj.freightPrice = this.$data.cartListData[i].goods.transportmoney;
          parmamsObj.freightRiskPrice = "0";
          parmamsObj.goodsimage =
            homeUrl() + this.$data.cartListData[i].goods.product_thumb_image;
          parmamsObj.keywords = this.$data.cartListData[i].goods.keywords;
          parmamsObj.goodsname = this.$data.cartListData[i].goods.goodsname;
          parmamsObj.goodsid = this.$data.cartListData[i].goods.goodsid;
          parmamsObj.goodsprice = this.$data.cartListData[i].goods.shop_price;
          parmamsArr.push(parmamsObj);
        }
        
      } 
      if (parmamsArr.length > 0) {
        this.$router.push({
          name: "order_confirm",
          params: {
            comfirGoodsInfo: parmamsArr,
            goodsMonery: this.$data.totalPrice
          }
        });
      } else {
        this.tankuang = true;
      }
    },
    // 单选商品
    checkItem(item) {
      var self = this;
      this.checked = true;
      self.totalPrice = 0;

      var checkShop = self.checkData;
    },
    go_delete() {
      var deleArr = [];
      if (this.checkedData.length != 0) {
        for (var i = 0; i < this.checkedData.length; i++) {
          var cartId = this.checkedData[i].cartsid;
          deleArr.push(cartId);
        }
        this.deleCart(deleArr);
      } else {
        this.tankuang = true;
      }
    },
    // 为你推荐
    myRecommend() {
      this.$http.get(homeUrl() + "getRecommendGoods/").then(
        result => {
          var searchArr = [];
          if (result.data.status == "ok") {
            var new_gooods = result.data.data;
            for (var i = 0; i < new_gooods.length; i++) {
              var searchObj = {};
              searchObj.src = this.urlList(new_gooods[i].recommendImg);
              searchObj.title = new_gooods[i].goods.goodsname;
              searchObj.desc = new_gooods[i].goods.goodsparams1;

              searchObj.goodsid = new_gooods[i].goods.goodsid;
              searchObj.shop_price = new_gooods[i].goods.shop_price;
              searchObj.market_price = new_gooods[i].goods.market_price;

              searchObj.rebate = "返利￥" + new_gooods[i].goods.rebate + "元";
              searchObj.kucun = new_gooods[i].goods.counts;
              searchObj.sellCount = new_gooods[i].goods.sellcount;

              searchArr.push(searchObj);
            }
            this.shoplistData = searchArr;
          }
        },
        error => {
          this.$vux.toast.text("网络请求失败....", "bottom");
        }
      );
    },
  },
  watch: {
  },
  mounted() {
    this.cartList();
    this.myRecommend();
  },
  created() {
    this.$vux.loading.show({
      text: "loading"
    });
    var that = this;
    setTimeout(() => {
      this.$vux.loading.hide();
    }, 1000);
  },
  activated: function() {
  },
  deactivated: function() {
    console.log("关闭界面");
    this.go_confirms();
  }
};
</script>
<style scoped>
.d-item {
  background: url(/static/cart/duin@2x.png);
  width: 1.875rem;
  height: 1.875rem;
  border: 1px solid #cccc;
  border-radius: 50%;
  background-size: 1.875rem;
}
.d-item-selected {
  background: url(/static/cart/dui@2x.png);
  width: 1.875rem;
  height: 1.875rem;
  background-size: 1.875rem;
}
.cart_wrap {
  background: url(/static/cart/gwbg@2x.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  width: 100%;
  height: 43rem;
  position: relative;
}
.go_choose {
  position: absolute;
  top: 30rem;
  left: 10rem;
}
/* 购物车列表 */
.shop_items {
  width: 100%;
  background: #ffffff;
  padding-left: 10px;
  padding-right: 10px;
}
.shops_ {
  width: 95%;
}
.shop_name {
  width: 100%;
  height: 40px;
  border-bottom: 1px solid rgb(236, 235, 235);
  line-height: 40px;
  margin: 0;
  padding: 0;
  padding-left: 20px;

}
.shop_list {
  display: flex;
  /* background: pink; */
  height: 135px;
  border-bottom: 1px solid rgb(236, 235, 235);
}
.shop_check {
  width: 35px;
  line-height: 135px;
}
.shop_img img {
  width: 95px;
  height: 95px;
}
.shop_img {
  width: 100px;
  margin-right: 5px;
  padding-top: 15px;
}
.shop_info {
  flex: 1;
  padding-top: 15px;
}
.shop_right {
  width: 50px;
  padding-top: 15px;
  padding-left: 10px;
}
.shop_right img {
  width: 25px;
  height: 25px;
}
.checks {
  width: 50px;
  height: 50px;
  line-height: 100px;
}
.shop_info span {
  color: #ed393d;
  margin-right: 5px;
}
.shop_day {
  color: #ccc;
  font-size: 12px;
  margin-top: 5px;
}
.dele {
  float: right;
  padding-top: 55px;
  padding-right: 8px;
}

.totle {
  float: right;
}

.car_del_totle {
  width: 100%;
  height: 50px;
  position: fixed;
  bottom: 57px;
  background: #ffffff;
  line-height: 50px;
}
.car_money {
  height: 100%;
  margin-left: 7rem;
  display: inline-block;
}
.car_totle {
  float: right;
  height: 100%;
  width: 8.25rem;
  color: #ffffff;
  text-align: center;
  background: #ed393d;
}
.car_del {
  float: right;
  height: 100%;
  width: 8.25rem;
  color: #fa0606;
  text-align: center;
  background: #f3f3d4;
  border: 1px solid #dad5d5;
}
.myrecommend {
  margin-top: 10px;
  margin-bottom: 60px;
}
.myrecommend .set-p {
  text-align: center;
  color: #fa0606;
  font-weight: 600;
}
#checks {
  width: 1.875rem;
  height: 1.875rem;
  border: 1px solid #cccc;
  border-radius: 50%;
}
#checks input[type="checkbox"] {
  width: 100%;
  height: 100%;
  border-radius: 50% !important;
  border: none;
  background: #ffffff;
}
</style>
